<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" type="images/x-icon" href="/static/image/b.png"/>
    <title>Buff游戏饰品交易平台</title>
    <style type="text/css">
        ::-webkit-scrollbar {
            display: none;
        }

        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .main {
            width: 100%;
            height: auto;
            margin: auto;
        }

        .top {
            width: 100%;
            height: 510px;
            border: 0px solid red;
            margin: auto;
            background-image: url(/static/image/index-header-bg.jpg);
        }

        .top2 {
            width: 100%;
            height: 440px;
            border: 0px solid green;
        }

        .torso {
            width: 100%;
            height: 670px;
            border: 1px solid grey;
            margin: auto;
            background-image: url(/static/image/index-section1-bg.jpg);
        }

        .torso1 {
            width: 1142px;
            height: 579px;
            border: 0px solid red;
            margin: 60px auto;
        }

        .torso1-0 {
            width: 1142px;
            height: 38px;
            border-bottom: 1px solid #BF9E4B;
            margin: auto;
        }

        .torso1-0-1 {
            width: 130px;
            height: 38px;
            border: 0px solid royalblue;
            background-color: #BF9E4B;
            color: white;
            text-align: center;
            float: left;
            line-height: 38px;
            border-radius: 2px 2px 0 0;
            margin-right: 40px;
            background-image: linear-gradient(270deg, rgba(206, 170, 52, .8) 0, rgba(189, 149, 42, .8) 36%, rgba(160, 113, 24, .8) 100%);
        }

        .torso1-0 li {
            float: left;
            margin: 0 40px 0 0;
            line-height: 40px;
            text-align: center;
            color: #929394;
            cursor: pointer;
        }

        li {
            display: list-item;
        }

        .torso1-0-2 {
            width: 100px;
            height: 30px;
            float: left;
            margin-left: 750px;
            text-align: center;
            color: #929394;
            cursor: pointer;
            margin-top: 8px;
        }
        .torso1-0-2 a{
            color: gray;
        }

        .torso1-1 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            padding: 0px -1px 5px 10px;
        }

        .myDiv {
            width: 200px;
            height: 150px;
            border: 0px solid coral;
            float: left;
            text-align: center;
            background-image: url(/static/image/item_bg.png);
        }

        .w {
            width: 200px;
            height: 220px;
            border: 0px solid coral;
            margin-top: 25px;
            background-color: #F5F5F5;
        }
        .w .goodsTitle{
            width: 200px;
            font-size: 16px;
            font-weight: normal;
            margin-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding-top: 5px;
        }
        .w a{
            color: black;
        }
        .w a:hover{
            color: orange;
            text-overflow: inherit;
            overflow: visible;
        }
        .w h3{
            color: orange;
            margin: 13px 0 0 5px;
        }

        .torso1-2 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            margin-top: -22px;
        }

        .myDiv1 {
            width: 200px;
            height: 150px;
            border: 0px solid coral;
            float: left;
            text-align: center;
            position: relative;
            background-image: url(/static/image/item_bg.png);
        }

        .thigh {
            width: 100%;
            height: 670px;
            border: 1px solid black;
            margin: auto;
            background-image: url(/static/image/index-section2-bg.jpg);
        }

        .thigh1 {
            width: 1142px;
            height: 579px;
            border: 0px solid red;
            margin: auto;
            margin-top: 60px;
        }

        .thigh1-0 {
            width: 1142px;
            height: 38px;
            border-bottom: 1px solid #3D547D;
            margin: auto;
        }

        .thigh1-0 li {
            float: left;
            margin: 0 40px 0 0;
            line-height: 40px;
            text-align: center;
            color: #929394;
            cursor: pointer;
        }

        .thigh1-0-1 {
            width: 130px;
            height: 38px;
            border: 0px solid royalblue;
            background-color: #3D547D;
            color: white;
            text-align: center;
            float: left;
            line-height: 38px;
            border-radius: 2px 2px 0 0;
            margin-right: 40px;
            background-image: linear-gradient(270deg, rgba(91, 126, 176, .8) 0, rgba(46, 71, 120, .8) 100%);
        }

        .thigh1-0-2 {
            width: 70px;
            height: 30px;
            border: 0px solid royalblue;
            float: left;
            margin-left: 450px;
            text-align: center;
            color: #3D547D;
            cursor: pointer;
            margin-top: 8px;
        }

        .thigh1-1 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            padding: 0px -1px 5px 10px;
        }


        .thigh1-2 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            margin-top: -22px;
        }
        .calf {
            width: 100%;
            height: 670px;
            border: 1px solid grey;
            margin: auto;
            background-image: url(/static/image/index-section3-bg.jpg);
        }

        .calf1 {
            width: 1142px;
            height: 579px;
            margin: auto;
            margin-top: 60px;
        }

        .calf1-0 {
            width: 1142px;
            height: 38px;
            border-bottom: 1px solid #BF9E4B;
            margin: auto;
        }

        .calf1-0 li {
            float: left;
            margin: 0 40px 0 0;
            line-height: 40px;
            text-align: center;
            color: #929394;
            cursor: pointer;
        }

        .calf1-1 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
        }

        .calf1-2 {
            width: 1142px;
            height: 270px;
            border: 0px solid greenyellow;
            justify-content: space-between;
            display: flex;
            flex-direction: row;
            margin-top: -22px;
        }
        .top1 a{
            text-decoration:none;
            color: white;
        }

        /* 头部css样式 */
        .top-head {
            width: 100%;
            height: 71px;
            background-color: #0000ff04;
            border-bottom:1px solid #1b253b;
        }

        .logo{
            width: 120px;
            height: 71px;
            float: left;
            text-align: center;
            line-height: 80px;
            margin-left: 9vw;
        }
        .logo img{
            margin-top: 25px;
        }
        .top ul{
            list-style: none;
        }
        .top li:hover{
            background-color: #ffffff07;
            cursor: pointer;
        }
        .top a{
            text-decoration: none;
            color: white;
        }
        .page{
            float: left;
        }

        .page li,.user-info li{
            width: 80px;
            height: 71px;
            float: left;
            text-align: center;
            line-height: 71px;
            font-size: 14px;
        }

        .user-info li:first-child{
            margin-left: 17vw;
        }
        .info{
            width: 60px;
            height: 71px;
            float: left;
            text-align: center;
            line-height: 80px;
        }
        .info img{
            margin-top: 25px;
        }
        .user{
            width: auto;
            height: 71px;
            color: white;
            float: left;
            line-height: 71px;
        }
        .user img{
            border-radius: 50%;
        }
        .login_reg{
            width: 80px;
            height: 71px;
            line-height: 71px;
            margin-left: 45vw;
            float: left;
            font-size: 14px;
            text-align: center;
        }
        .login_reg:hover{
            background-color: #ffffff07;
            cursor: pointer;
        }


    </style>

    <link rel="stylesheet" href="/static/css/floatbar.css">
    <link rel="stylesheet" type="text/css" href="/static/css/font.css" />
    <link rel="stylesheet" href="/static/css/login.css">
    <script src="/static/js/login.js"></script>
    <c:if test="${not empty sessionScope.userNow}">
        <script src="/static/js/index-store.js"></script>
    </c:if>
</head>
<body>

<div class="main">
    <div class="top">
        <div class="top-head">
            <div class="logo">
                <img src="/static/image/logo.png" />
            </div>
            <div class="page">
                <ul>
                    <li><a href="javascript:;">首页</a></li>
                    <li><a href="/goods/market?dealType=1&pageNum=1">饰品市场</a></li>
                    <li><a href="javascript:;">游戏资讯</a></li>
                    <li><a href="${pageContext.request.contextPath }/goods/showBox">武器箱</a></li>
                </ul>
            </div>
            <c:if test="${not empty sessionScope.userNow}">
                <div class="user-info">
                    <ul>
                        <li><a href="/user/inventory?pageNum=1">我的库存</a></li>
                        <li><a href="/user/mysell?pageNum=1" target="sell">我的出售</a></li>
                        <li><a href="/user/mybuy">我的求购</a></li>
                        <li><a href="javascript:;"><img src="/static/image/logo_csgo_black.png" align="center"/>&nbsp;CS:GO</a></li>
                    </ul>
                    <div class="info">
                        <a href="/user/info"><img src="/static/image/nav_msg_norm.png" /></a>
                    </div>
                    <div class="user" id="user">
                        <c:if test="${empty sessionScope.userNow.headPath}">
                            <img src="../static/image/defaultHead.png" width="32px" height="32px" align="center"/>
                        </c:if>
                        <c:if test="${not empty sessionScope.userNow.headPath}">
                            <img src="${sessionScope.userNow.headPath}" width="32px" height="32px" align="center"/>
                        </c:if>

                        <c:if test="${not empty sessionScope.userNow.username}">
                            <span><a href="${pageContext.request.contextPath }/user/center"> ${sessionScope.userNow.username}</a></span>
                        </c:if>
                        <c:if test="${empty sessionScope.userNow.username}">
                            <span><a href="${pageContext.request.contextPath }/user/center"> ${sessionScope.userNow.tellphone}</a></span>
                        </c:if>
                    </div>
                </div>
            </c:if>
            <c:if test="${empty sessionScope.userNow}">
                <div class="login_reg">
                    <a href="javascript:;" id="open">登陆/注册</a>
                </div>
            </c:if>
        </div>

        <div class="top2"></div>
    </div>
    <div class="torso">
        <div class="torso1">
            <div class="torso1-0">
                <div class="torso1-0-1">
                    <h3>热门饰品</h3>
                </div>
                <ul id="os">
                    <li class="p"><img src="/static/image/logo_csgo.png" align="center">CS:GO</li>
                </ul>
                <div class="torso1-0-2"><a href="/goods/market?dealType=1&pageNum=1">进入市场></a></div>
            </div>
            <div class="torso1-1">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="0" end="4">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
            <div class="torso1-2">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="5" end="10">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                            <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    <div class="thigh">
        <div class="thigh1">
            <div class="thigh1-0">
                <div class="thigh1-0-1">
                    <h3>最新上架</h3>
                </div>
                <ul>
                    <li class="p"><img src="/static/image/logo_csgo_black.png" align="center">CS:GO</li>
                </ul>
                <div class="torso1-0-2">
                    <a href="/goods/market?dealType=1&pageNum=1" style="color: white">进入市场>
                    </a>
                </div>
            </div>
            <div class="thigh1-1">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="3" end="7">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
            <div class="thigh1-2">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="5" end="10">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>
    <div class="calf">
        <div class="calf1">
            <div class="calf1-0">
                <div class="torso1-0-1">
                    <h3>最新求购</h3>
                </div>
                <ul id="o">
                    <li class="p"><img src="/static/image/logo_csgo.png">CS:GO</li>
                </ul>
                <div class="torso1-0-2">
                    <a href="/goods/market?dealType=1&pageNum=1">进入市场>
                    </a>
                </div>
            </div>
            <div class="calf1-1">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="0" end="4">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
            <div class="calf1-2">
                <c:forEach items="${applicationScope.indexList}" var="deal" begin="3" end="7">
                    <div class="w">
                        <div class="myDiv">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                <img src="${deal.ep.goods.converPath}" width="150px" height="130px">
                            </a>
                        </div>
                        <h4 class="goodsTitle">
                            <a href="${pageContext.request.contextPath}/goods/goodsInfo/${deal.ep.id}">
                                    ${deal.ep.goods.goodsType.name} | ${deal.ep.goods.coating} (${deal.ep.appearance})
                            </a>
                        </h4>
                        <h3>¥ 9339</h3>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>






    <%--页面尾部--%>
    <div class="tail">
        <iframe src="${pageContext.request.contextPath }/goods/tail" scrolling="no" width="100%" height="324px" frameborder="0" ></iframe>
    </div>

    <%--页面右侧悬浮框--%>
    <div class="floatbar">
        <a href="">
            <div class="Icontext"><span class="iconfont icon-shouji"></span><br />
                <font size="1">App</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-xingxing"></span><br />
                <font size="1" color="#95959">收藏</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weixin"></span><br />
                <font size="1" color="#95959">公众号</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-weibo"></span><br />
                <font size="1" color="#95959">微博</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-wenhao"></span><br />
                <font size="1" color="#95959">帮助</font>
            </div>
        </a>
        <a href="">
            <div class="Icontext"><span class="iconfont icon-duanxin"></span><br />
                <font size="1" color="#95959">客服</font>
            </div>
        </a>
        <a href="javascript:scroll(0,0);">
            <div class="backTop"><span class="iconfont icon-sanjiaoxing_shang"></span><br />
                <font size="2" color="#95959">TOP</font>
            </div>
        </a>
    </div>

    <%--登陆框--%>
    <div id="popDiv">
        <!-- 关闭弹出窗口 -->
        <div class="close">
            <a href="javascript:void(0)" id="close">X</a>
        </div>
        <!-- 窗口div内容 -->
        <b>登陆/注册</b>
        <div id="infoLogin" class="tellphoneReg">使用短信验证登陆</div>
        <div id="pwdLogin" class="tellphoneReg" style="display: none;"><span>使用手机号密码登陆</span></div>
        <!-- 表单 -->
        <div class="formDiv" id="formDiv">
            <form  action="${pageContext.request.contextPath}/user/login"  method="post" id="login">
                <div class="tellphoneDiv">
                    <input type="text" placeholder="手机号"  id="tel" name="tellphone"/>
                </div>

                <!-- 密码登陆 -->
                <div class="passwordDiv" id="passwordDiv">
                    <input type="password" placeholder="密码" id="pwd" name="password"/>
                </div>
                <!-- 验证码 -->
                <div class="verificatioCode" id="verificatioCode">
                    <input type="text" id="inputcode" placeholder="验证码">
                    <div id="code" class="code"></div>
                </div>

                <div class="verificatioCode" id="getTellCode" style="display: none;">
                    <input type="text" placeholder="验证码">
                    <div class="code"style="background-color: #55aaff;color: white;">获取验证码</div>
                </div>

                <span id="hint" style="display: none;margin-top:15px;font-size: 13px;"></span>
                <div class="sub">
                    <input type="submit" value="登陆/注册" id="sub" />
                </div>

            </form>
        </div>
        <div class="policy" id="policy">
            <input type="checkbox" id="consent" checked="checked
"/>
            我同意<a href="javascript:;">《用户协议》</a>、<a href="javascript:;">《隐私政策》</a>、
            <a href="javascript:;">《儿童个人信息保护规则及监护人须知》</a>、<a href="javascript:;">《第三方服务共享清单》</a>
        </div>
    </div>

    <%--页面遮罩层--%>
    <div id="cover" class="cover" style="background: #000000; position: absolute;
    left: 0px; top: 0px; width: 100%; filter: alpha(opacity=30); opacity: 0.4; display:
    none; z-index: 2;"></div>

    <%--用户信息悬浮窗--%>
    <div class="store" id="store">
        <div class="store-info">
            <div class="store-user">
                <div class="store-user-img">
                    <c:if test="${empty sessionScope.userNow.headPath}">
                        <img src="../static/image/defaultHead.png" width="52px" height="52px"/>
                    </c:if>
                    <c:if test="${not empty sessionScope.userNow.headPath}">
                        <img src="${sessionScope.userNow.headPath}" width="52px" height="52px"/>
                    </c:if>
                </div>
                <div class="store-user-name">
                    <c:if test="${not empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.username}</h4>
                    </c:if>
                    <c:if test="${empty sessionScope.userNow.username}">
                        <h4>${sessionScope.userNow.tellphone}</h4>
                    </c:if>
                    <p><a href="/user/logout">注销</a></p>
                </div>
            </div>
            <div class="store-account">
                <div class="balance">余额
                    <span>￥${sessionScope.userNow.balance}</span>
                </div>
                <div class="topUp">
                    <a href="/user/center"><font color="white">充值</font></a>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>

